<template>
	<div class="Me">
		<div class="me" v-on:click='go("/kbc/h5/info",userData)'>
			<div class="user-img">
				<img v-if='userData.imgUrl' v-bind:src="userData.imgUrl" :onerror="avatar">
				<img v-else-if="userData.sex === '男'" src="../../../kbc/h5/img/css/common/man.png">
				<img v-else-if="userData.sex === '女'" src="../../../kbc/h5/img/css/common/woman.png">
				<img v-else src="../../../kbc/h5/img/css/common/man.png">
			</div>
			<div class="title">
				<p class="name" v-if="userData.userName ===''">未设置账号</p>
				<p class="name" v-else>{{userData.userName}}</p>
				<p class="member">{{memberName}}</p>
			</div>
			<div class="title-icon">
				<i class="icon iconfont icon-jiantouyou"></i>
			</div>
		</div>
		<div class="me-tab">
			<mt-cell :title="$t('my.UserCenter')" v-on:click.native="go('/kbc/h5/UserCenter',userData)">
				<i slot="icon" class="iconfont" style="background:#FF4F2D;">&#xe625;</i>
			</mt-cell>
			<mt-cell :title="$t('my.MyTeam')" to='/kbc/h5/MyTeam'>
				<i slot="icon" class="iconfont" style="background:#009BF7;">&#xe6ad;</i>
			</mt-cell>
			<mt-cell :title="$t('my.MyShare')" to='/kbc/h5/MyShare'>
				<i slot="icon" class="iconfont" style="background:#FDAA3B;">&#xe95d;</i>
			</mt-cell>
			<!--<mt-cell title="服务热线" to="tel:96028">
				<i slot="icon" class="iconfont" style="background:#AE5BFE;">&#xe616;</i>
				<span class="red" style="margin-right:3rem;">96028</span>
			</mt-cell>
			<mt-cell to='sharing' title="分享">
				<i slot="icon" class="iconfont" style="background:#F32043;">&#xe618;</i>
			</mt-cell>
			<mt-cell to='collect' title="收藏">
				<i slot="icon" class="iconfont" style="background:#00B7FF;">&#xe62f;</i>
			</mt-cell>
			<mt-cell to='config' title="设置">
				<i slot="icon" class="iconfont" style="background:#F32043;">&#xe656;</i>
			</mt-cell>-->
		</div>
		<div class="button-box">
			<mt-button type="danger" size="large" @click.native="loginOut">{{$t("my.LoginOut")}}</mt-button>
		</div>
	</div>
</template>

<script>
	import router from './../../router';
	import util from './../../js/util/util.js';
	import { Indicator, Cell, MessageBox } from 'mint-ui';
	export default {
		data() {
			return {
				userData: {},
				avatar: 'this.src="' + require('../../../kbc/h5/img/css/common/man.png') + '"',
				memberName:''
				/*{
				    "id": 1,
				    "openId": "oDAEOv4aV21upSgx7JLZPbhdEYbU",
				    "username": "oDAEOv4aV21upSgx7JLZPbhdEYbU@nursingWork",
				    "name": "晖",
				    "birthday": "1997-12-07",
				    "phoneNum": "13985160123",
				    "gender": "male",
				    "avatar": "http://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E5%A4%B4%E5%83%8F&hs=0&pn=3&spn=0&di=169813820110&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=547138142%2C3998729701&os=1840643701%2C1875487181&simid=3533872911%2C354593644&adpicid=0&lpn=0&ln=30&fr=ala&fm=&sme=&cg=head&bdtype=0&oriquery=%E5%A4%B4%E5%83%8F&objurl=http%3A%2F%2Fwww.hnlywz.com%2Fa%2Fupload%2Fbd118381382.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3Bigsyoz_z%26e3Bv54AzdH3F8da9bld_z%26e3Bip4s&gsm=0",
				    "createdById": null
				},*/
			}
		},
		created() {
			this.$store.state.isFooterShow = true; //显示底部导航
			this.$store.state.flag = 3;
		},
		components: {
			Cell,
			MessageBox
		},
		methods: {
			go: function(url, data) {
				if (url == 0) {
					this.$toast('待开放.....敬请关注！');
				} else{
					util.pushRouter(router, url, {
					"data": data
					})
				}
			},
			loginOut: function() {
				MessageBox.confirm('是否确认退出?').then(action => {
					this.$toast('退出了登录');
					//清空缓存数据
					localStorage.setItem("fatherItem","");
					util.pushRouter(router, '/kbc/h5/login');
				});
			}
		},
		mounted: function() {
			
			var $this = this;
			util.Ajax('/userCentered/getMemeberById', "POST",{},function(data) { //成功
				if(data) {
					if(data.code == "0") {
						$this.userData = data.member;
						$this.memberName = util.getMemberName(data.member.level);
					} else {
						Toast(data.msg);
					}
				}
			})
		}
	}
</script>
<style>
	.Me .me{ width: 100%; margin: 0 auto 1rem; padding: 1rem 0; background: #fff; display: flex; box-sizing: border-box; text-align:left;}
	.Me .user-img{width:30%;text-align:left; padding:0 10px;}
	.Me .user-img img{ width:80px; height:80px; border-radius: 50%;display: block;float: left;}
	.Me .name{font-size:1.4rem; margin-bottom:1rem; font-weight: 700;}
	.Me .member{font-size: 1.1rem;color: #FF4949;}
	.Me .title{width:33.335%;padding:10px 1.5rem 10px 10px;font-size:1.4rem;}
	.Me .title-icon{width:33.335%;line-height: 80px; padding-right: 10px;}
	.Me .title-icon i{float: right;}
	.Me .mint-cell:before{
		   content:" ";
		   position: absolute;
		   top:20px;
		   right:15px;
		   display: block;
		   width: 10px;
		   height: 10px;
		   border-top: 1px solid #d9d9d9;
		   border-right: 1px solid #d9d9d9;
		   transform:rotate(45deg);
	}
	.Me .mint-cell-title{position: relative;}
	.Me .mint-cell-title .mint-cell-text{ margin-left:4rem;}
	.Me .mint-cell .iconfont{ margin-right:1.2rem;font-size:1.4em;
	  position: absolute; top:-0.4rem;left:0; 
	  background:#ccc;
	  padding: 0.2rem; text-align: center;
	  color: #fff;
	  border-radius: 5px;
	  display: block;
	  overflow: hidden;
     width: 2rem;
	}
	.me-tab .mint-cell:first-child{
		    background-image: -webkit-linear-gradient(bottom, #d9d9d9, #d9d9d9 50%, transparent 50%);
		    background-image: linear-gradient(0deg, #d9d9d9, #d9d9d9 50%, transparent 50%);
		    background-size: 100% 1px;
		    background-repeat: no-repeat;
		    background-position: top;
     }
     .Me .button-box{padding: 10px;margin-top:20px;}
     .Me .mint-button {font-size: 1.3rem;}
     .Me .button-box .mint-button--danger {background-color:#4e8bfe;}
</style>